<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .smbox{
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="bigbox" >
        <div class="smbox"></div>
    </div>
    <script>
        // //事件源
        // const ck=document.querySelector('.smbox');
        // //事件绑定
        // ck.addEventListener('click',function(){
        //     alert('点击了小盒子');
        // });
        // const ck2=document.querySelector('.bigbox');
        // ck2.addEventListener('click',function(){
        //     alert('点击了大盒子');
        // });

        /*
        DOM对象.addEventListener(type,callback,[capture]);
        caputure为可选择参数，布尔类型
        如果是true，表示在捕获阶段调用事件处理程序（从大到小）
        如果是false（默认值），表示在冒泡阶段调用事件处理程序（从小到大）
        */

        
        // const ck=document.querySelector('.smbox');
        // ck.addEventListener('click',function(){
        //     alert('点击了小盒子');
        // },true);
        // const ck2=document.querySelector('.bigbox');
        // ck2.addEventListener('click',function(){
        //     alert('点击了大盒子');
        // },true);
        // document.addEventListener('click',function(){
        //     alert('点击了文档');
        // },true);


        // const ck=document.querySelector('.smbox');
        // ck.addEventListener('click',function(){
        //     alert('点击了小盒子');
        // },false);
        // const ck2=document.querySelector('.bigbox');
        // ck2.addEventListener('click',function(){
        //     alert('点击了大盒子');
        // },false);
        // document.addEventListener('click',function(){
        //     alert('点击了文档');
        // },false);


//阻止事件冒泡
        //事件源
        const ck=document.querySelector('.smbox');
        //事件绑定
        //事件对象：事件处理函数中第一个参数（event，evt，e）
        ck.addEventListener('click',function(evt){
            console.log(evt);
            console.log(evt.type);//事件类型
            console.log(evt.target);
            evt.stopPropagation();//处阻止（事件）传播
            alert('点击了小盒子');
        },false);
        const ck2=document.querySelector('.bigbox');
        ck2.addEventListener('click',function(evt){
            console.log(evt.target);
            alert('点击了大盒子');
            evt.stopPropagation();//处阻止（事件）传播
        },false);
        document.addEventListener('click',function(ebt){
            ebt.stopPropagation();//处阻止（事件）传播
            alert('点击了文档');
        },false);
    </script>
</body>
</html>